<template>
	<div>
		<!-- 全局数据操作按钮 -->
		<p>
			<button class="btn btn-white btn-default btn-round" @click="list(1)">
				<i class="ace-icon fa fa-refresh"></i>刷新
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="add">
				<i class="ace-icon glyphicon glyphicon-plus"></i>新增
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="test">
				<i class="ace-icon glyphicon glyphicon-tent"></i>测试
			</button>
		</p>


		<!--模态框 -->
		<div>
			<save id="save-modal" :teacher="teacher"></save>
		</div>

		<!-- 列表数据 -->
		<!-- 		<table id="simple-table" class="table  table-bordered table-hover">
			<thead>
				<tr>
					<th>id</th>
					<th>名称</th>
					<th>昵称</th>
					<th>头像</th>
					<th>操作</th>
				</tr>
			</thead>
	
			<tbody>
				<tr v-for="item in teachers" :key="item.id">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.nickname}}</td>			
					<td>{{item.image}}</td>
					<td><operation :teacher="item"/></td>									
				</tr>
			</tbody>
		</table> -->

		<div class="paginations">
			<pagination :list="list" ref="pagination"></pagination>
		</div>
	</div>
</template>

<script>
	import operation from '@/views/teacher/components/operation'
	import save from '@/views/teacher/components/save'
	import pagination from '@/views/components/pagination'
	export default {
		data() {
			return {
				teachers: [],
				teacher: {},
				teacherDefaultImage: '/image/讲师头像/头像1.jpg'
			}
		},
		components: {
			operation,
			pagination,
			save
		},
		mounted() {
			this.list(1)
		},
		methods: {
			list(page) {
				let param = {
					pageIndex: page,
					pageSize: this.$refs.pagination.size
				}
				let url = process.env.VUE_APP_SERVER + 'business/admin/teacher/list'
				this.$axios.post(url, param)
					.then(res => {
						console.log('teacher-list')
						let data = res.data.data
						this.teachers = data.list
						this.$refs.pagination.render(page, data.total)
					})
			},
			test() {
				console.log(process.env.NODE_ENV)
				this.$toast(process.env.VUE_APP_SERVER, this.$global.toast.success)
			},
			add() {
				this.teacher = {}
				$('#save-modal').modal('show')
			}
		}
	}
</script>

<style scoped>
	.table {
		margin-bottom: 5px;
	}

	.paginations {
		text-align: right;
	}
</style>
